<template>
  <div>
      <van-row>
        <van-col span="24">
            <heads/>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="2.5">
            <left/>
        </van-col>
        <van-col span="3.5">
            <input type="text" placeholder="请输入名称">
            <van-button color="blue" size="small">搜索</van-button> <br>
            <xtree />
        </van-col>
        <van-col span="1">

        </van-col>
        <van-col span="17">
            账号：<input type="text" placeholder="请输入账号">
            姓名：<input type="text" placeholder="请输入姓名">
            手机号：<input type="text" placeholder="请输入手机号">
            <van-button icon="search">查询</van-button>
            <van-button icon="replay">重置</van-button> <br>

            <van-button  icon="plus">新增</van-button>
            <van-button icon="cross">删除</van-button>
            <van-button icon="down">导出</van-button>
            <van-button icon="arrow-up">导入</van-button>
            <van-button icon="fail">冻结</van-button>
            <van-button icon="success">解冻</van-button>
            <van-button icon="circle">回收站</van-button>

            <table border="1" cellspacing="0" class="table">
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>账号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号</th>
                    <th>邮箱</th>
                    <th>工号</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <tr v-for="i in list" :key="i.id" align="center">
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>{{i.user}}</td>
                    <td>{{i.name}}</td>
                    <td>{{i.sex}}</td>
                    <td>{{i.mobile}}</td>
                    <td>{{i.email}}</td>
                    <td>{{i.workid}}</td>
                    <td>{{i.status}}</td>
                    <td>
                        <button>编辑</button>
                        <button>更多</button>
                    </td>
                </tr>
            </table>
        </van-col>
      </van-row>
      
  </div>
</template>

<script>
import left from '../comm/left.vue'
import heads from '../comm/heads.vue'
import xtree from '../comm/xtree.vue'

import axios from '../../http/axios'

export default {
    components:{
        'left':left,
        'heads':heads,
        'xtree':xtree,
    },
    data(){
        return{
            list:[]
        }
    },
    methods:{
        getlist(){
            axios('users','get').then(res=>{
                this.list = res.list
            })
        }
    },
    mounted(){
        this.getlist()
    }
}
</script>

<style>
.table{
    width: 1080px;
}
</style>